<template>
	<view class="content">
		<u-navbar :is-back="true" :background="navbarbgColor" :border-bottom="false">
			<view style="height: 10px;"></view>
			<view  class="slot-wrap disfr-lr p15 f32" style="width: 100%;">
				<view class="slot-wrap-left">
			
				</view>
				<view class="slot-wrap-center mt10">担保交易</view>
		        <view class="slot-wrap-right pr">
					<view class="mr20" @click="goPage" data-uri="/pages/guarantee/guarantee"><u-icon name="plus"  size="44"></u-icon></view>
				</view>
			</view>
		</u-navbar>
		
		<my_navbar_ext height="50" bg-color="#f4f4f4">
		   <u-tabs-swiper ref="tabs1" bg-color="#f4f4f4" :current="current" @change="tabsChange" :list="tagsList" :is-scroll="false"></u-tabs-swiper>
		</my_navbar_ext>
			
		<view v-if="show_main" class="main" >
			<view :class="current == 0 ?  '' : 'hide'"><!--我是付款方-->
				<view v-for="(item,index) in list" :key="item.id" class="bgf m20" style="border-radius: 6px;">
					<view @click="copy" :data-text="item.order_no" class="f32" style="padding: 30rpx 30rpx 10rpx 20rpx;">
						交易号:<text class="b">{{item.order_no}}</text>
						<u-icon name="fuzhi" custom-prefix="qxl-icon" style="position: relative;top:0px;left:3px;" size="34"></u-icon>
					</view> 
					<view class="disf p20">
						<view style="width: 90rpx;height: 90rpx;overflow: hidden;border-radius:4px;flex-shrink: 0;">
							<u-image width="94rpx" height="94rpx" :src="item.payer_img">
								<template v-slot:error>
									<image src="/static/image/default-user.png" style="width:94rpx;height: 94rpx;"></image>
								</template>
							</u-image>
						</view>
						<view class="f28 ml10">
							<view class="f32 disfr-lr">
								<view>{{item.payer_name}}</view>
								<view class="f36 colf60">￥{{item.amount}}</view>
							</view>
							<view class="mt10 col999 disfr-lr" style="width: 550rpx;">
								<view>{{item.payer_mobile}}</view>
								<view @click="toServers" class="f26" style="background: #eee;border-radius: 6px;padding: 5rpx 20rpx;">联系客服</view>
							</view>
						</view>
					</view>
					<view class="f30 bto" style="padding: 20rpx 30rpx 20rpx 30rpx;">
						<view class="disfr-lr">
							<text>收款方</text>
							<view class="disf">
								<view style="width: 50rpx;height: 50rpx;overflow: hidden;border-radius:50%;flex-shrink: 0;">
									<u-image width="54rpx" height="54rpx" :src="item.receive_img">
										<template v-slot:error>
											<image src="/static/image/default-user.png" style="width:54rpx;height: 54rpx;"></image>
										</template>
									</u-image>
								</view>
								<view class="ml10">{{item.receive_name}}</view>
							</view>
						</view>
						<view class="disfr-lr mt20">
							<text>发起时间</text>
							<text class="col999">{{item.add_time}}</text>
						</view>
					</view>
					<view class="disfr-lr f30 bto" style="padding: 20rpx 30rpx 20rpx 30rpx;">
						<view>
							<view>
								<view><text class="col999">托管时间:</text>{{item.hosting_time ? item.hosting_time : '无'}}</view>
								
							</view>
							<view class="mt10"><text class="col999">完成时间:</text>{{item.complete_time ? item.complete_time : '无'}}</view>
						</view>
						<view style="text-align: right;">
						   <view>{{item.status_str}}</view>
						   <view v-if="item.status_str == '暂未交纳托管金额'" class="col999 f24">交纳托管金额请联系客服</view>
						</view>
					</view>
				</view>
				
				<view v-if="list.length <= 0 && not_load" style="text-align: center;margin-top: 40%;">
					<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
					<view class="f32 col999 mt20">什么都木有哦</view>
				</view>
				<pageload :page_load="page_load" :next_page="next_page" :list="list" /><!--分页加载状态-->
				<loading :loading="not_load"/><!--加载状态-->
			</view><!--我是付款方-->
			
			<view :class="current == 1 ?  '' : 'hide'"><!--申请入群列表-->
			  <view v-for="(item,index) in list2" :key="item.id" class="bgf m20" style="border-radius: 6px;">
				<view @click="copy" :data-text="item.order_no" class="f32" style="padding: 30rpx 30rpx 10rpx 20rpx;">
					交易号:<text class="b">{{item.order_no}}</text>
					<u-icon name="fuzhi" custom-prefix="qxl-icon" style="position: relative;top:0px;left:3px;" size="34"></u-icon>
				</view>  
			  	<view class="disf p20">
			  		<view style="width: 90rpx;height: 90rpx;overflow: hidden;border-radius:4px;flex-shrink: 0;">
			  			<u-image width="94rpx" height="94rpx" :src="item.receive_img">
			  				<template v-slot:error>
			  					<image src="/static/image/default-user.png" style="width:94rpx;height: 94rpx;"></image>
			  				</template>
			  			</u-image>
			  		</view>
			  		<view class="f28 ml10">
			  			<view class="f32 disfr-lr">
			  				<view>{{item.receive_name}}</view>
			  				<view class="f36 colf60">￥{{item.amount}}</view>
			  			</view>
			  			<view class="mt10 col999 disfr-lr" style="width: 550rpx;">
			  				<view>{{item.receive_mobile}}</view>
			  				<view @click="toServers" class="f26" style="background: #eee;border-radius: 6px;padding: 5rpx 20rpx;">联系客服</view>
			  			</view>
			  		</view>
			  	</view>
			  	<view class="f30 bto" style="padding: 20rpx 30rpx 20rpx 30rpx;">
			  		<view class="disfr-lr">
			  			<text>付款方</text>
			  			<view class="disf">
			  				<view style="width: 50rpx;height: 50rpx;overflow: hidden;border-radius:50%;flex-shrink: 0;">
			  					<u-image width="54rpx" height="54rpx" :src="item.payer_img">
			  						<template v-slot:error>
			  							<image src="/static/image/default-user.png" style="width:54rpx;height: 54rpx;"></image>
			  						</template>
			  					</u-image>
			  				</view>
			  				<view class="ml10">{{item.payer_name}}</view>
			  			</view>
			  		</view>
			  		<view class="disfr-lr mt20">
			  			<text>发起时间</text>
			  			<text class="col999">{{item.add_time}}</text>
			  		</view>
			  	</view>
			  	<view class="disfr-lr f30 bto" style="padding: 20rpx 30rpx 20rpx 30rpx;">
			  		<view>
			  			<view><text class="col999">托管时间:</text>{{item.hosting_time ? item.hosting_time : '无'}}</view>
			  			<view class="mt10"><text class="col999">完成时间:</text>{{item.complete_time ? item.complete_time : '无'}}</view>
			  		</view>
			  		<view v-if="item.status_str == '暂未交纳托管金额'">
						<view>付款方已发起交易</view>
					    <view class="col999 f24">等待付款方付款</view>
					</view>
					<view v-else>{{item.status_str}}</view>
			  	</view>
			  </view>
			  
			  <view v-if="list2.length <= 0 && not_load2" style="text-align: center;margin-top: 40%;">
			  	<view><u-icon name="wuneirong-copy" custom-prefix="qxl-icon" color="#999999" size="100"></u-icon></view>
			  	<view class="f32 col999 mt20">什么都木有哦</view>
			  </view>
			  <pageload :page_load="page_load2" :next_page="next_page2" :list="list2" /><!--分页加载状态-->
			  <loading :loading="not_load2"/><!--加载状态-->
			</view><!--申请入群列表 结束-->
			
		</view>
		
	   <u-no-network tips="哎呀，网络信号丢失"></u-no-network><!--检测网络-->
	</view>
</template>

<script setup>
import { onLoad, onShow, onHide, onReachBottom,onPullDownRefresh } from '@dcloudio/uni-app';
import { ref } from 'vue';	
const navbarbgColor=ref({backgroundColor:'#f4f4f4'});
const show_main=ref(true);
const oh_signal=ref([]);
//我是付款方
const not_load=ref(false);
const next_page=ref('');
const page_load=ref(false);
const list=ref([]);
//我是收款方
const not_load2=ref(false);
const next_page2=ref('');
const page_load2=ref(false);
const list2=ref([]);
const tagsList=ref([
	{name:'我是付款方'},
	{name:'我是收款方'}
	]);
const current=ref(0);
//切换
const tabsChange=(e)=>{
	next_page.value='';
	current.value=e;
	if(current.value == 0){
		if(list.value.length <= 0) loadPage({type:0},false);
	}else{
		if(list2.value.length <= 0) loadPage2({type:1},false);
	}
};

//页面加载时
onLoad(async (options)=>{
   
});

//页面显示时执行
onShow(()=>{
	if(current.value == 0){
		loadPage({type:0},false);
	}else{
		loadPage2({type:1},false);
	}
});
//页面隐藏时执行
onHide(()=>{
	
});

/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-guarantee-getlist',options);
	console.log(ret);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
    page_load.value=false;
	show_main.value=true;
	not_load.value=true;
	next_page.value=ret.data.next_page;
	if(isPage) list.value=[...list.value,...ret.data.list];
	else list.value=ret.data.list;
	oh_signal.value=ret.data.oh_signal;
};
/**
 * 加载接口数据
 * @param {Object} options  参数,对像数组
 * @param {Object} isPage   是否加载大于1页
 */
const loadPage2=async (options,isPage)=>{
	let ret = await uni.$get('/appapi-guarantee-getlist',options);
	if(ret.error_code != 0){
		uni.$utils.showToast(ret.info);
		return;
	}
    page_load2.value=false;
	show_main.value=true;
	not_load2.value=true;
	next_page2.value=ret.data.next_page;
	if(isPage) list2.value=[...list2.value,...ret.data.list];
	else list2.value=ret.data.list;
	oh_signal.value=ret.data.oh_signal;
};
onPullDownRefresh(()=>{
	setTimeout(()=>{
		if(current.value == 0){
			loadPage({type:0},false);
		}else{
			loadPage2({type:1},false);
		}
		uni.stopPullDownRefresh();
	}, 1000);
});
//上拉触底加载分页
onReachBottom(()=>{
	if(current.value == 0){
		if (!next_page.value) return;
		if (page_load.value) return;
		page_load.value=true;
		setTimeout(()=>{
		  loadPage(next_page.value, true); 
		},2000);
	}else{
		if (!next_page2.value) return;
		if (page_load2.value) return;
		page_load2.value=true;
		setTimeout(()=>{
		  loadPage2(next_page2.value, true); 
		},2000);
	}
});


/**
 * 模板属性跳转页面
 * @param {Object} e
 */
function goPage(event){
	uni.$utils.dataSetPage(event);
};

// 发起客服
const toServers=()=>{
	var index = Math.floor(Math.random() * oh_signal.value.length);
	let val=oh_signal.value[index];
	if(!val) return;
	//console.log(val);return;
	let uri='';
	let conv=getConversationID(val);
	if(conv.conversationID){
		uri='/pages/chat-single/chat-single?conversationID='+conv.conversationID+'&nick='+conv.userProfile.nick+'&to='+val;
		uni.$utils.goPage(uri,0);
		return;
	}
	not_load.value=false;
	let str=uni.$appConfig['IM_PREFIX_MAKR']['da_zhao_hu']['rule']+'你好！';
	uni.TIM.createTextMessage(0,val,str,(data)=>{
		setTimeout(()=>{
			conv=getConversationID(val);
			not_load.value=true;
			if(conv.conversationID){
				uri='/pages/chat-single/chat-single?conversationID='+conv.conversationID+'&nick='+conv.userProfile.nick+'&to='+val;
				uni.$utils.goPage(uri,0);
				return;6
			}
		},500);
	});
};
//获取当前用户的会话ID
const getConversationID=(userId)=>{
	let list=uni.$vuex.state.globalData.conversationList;
	for(let i in list){
		if(list[i].type != 'C2C') continue;
		if(list[i].userProfile.userID == userId){
			return list[i];
		}
	}
	return {};
};
//复制
const copy =(e)=>{
	let text=e.currentTarget.dataset.text;
	text=text.toString();
	//console.log(text);return;
	uni.setClipboardData({
		data: text,
		success: function () {
		  uni.showToast({
			title: '复制成功',
			icon: 'success',
			duration: 2000
		  });
		},
		fail: function () {
		  //console.log('复制失败');
		  // 可以添加错误处理或用户友好的提示
		}
	});
}
</script>

<style  lang="scss">
	page {
		
	}
.fnow{color:#2979ff;}
.info-number{
	position: absolute;
	top:0;
	right: 90rpx;
	width: 42rpx;
	height: 42rpx;
	border-radius: 50%;
	line-height: 42rpx;
	text-align: center;
	font-size: 22rpx;
	background: red;
	color:red;
	color:#fff;
	z-index: 9999;
}
</style>
